<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/global.css" media="all"/>
    <link rel="stylesheet" type="text/css" media="screen" href="../../layui/css/layui.css">
</head>
<body>
<form class="layui-form" action="" style="margin-top: 10px">
    <input type="hidden" id="id" name="id">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="tel" name="username" id="username" lay-verify="required" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-inline">
                <input type="tel" name="oldPassword" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-inline">
                <input type="tel" name="newPassword" id="newPassword" lay-verify="required|oldPassword"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">再次输入新密码</label>
            <div class="layui-input-inline">
                <input type="tel" name="newPassword2" id="newPassword2" lay-verify="required|newPassword"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo">立即提交</button>
        </div>
    </div>
</form>
<script type="text/javascript" src="../../js/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../js/jq.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript">

    //获取url后的参数值
    function getUrlParam(key) {
        var href = window.location.href;
        var url = href.split("?");
        if (url.length <= 1) {
            return "";
        }
        var params = url[1].split("&");
        for (var i = 0; i < params.length; i++) {
            var param = params[i].split("=");
            if (key == param[0]) {
                return param[1];
            }
        }
    }

    function init() {
        var id = getUrlParam("id");
        $.ajax({
            type: 'get',
            url: '/users/' + id,
            async: false,
            data: $("#form").serialize(),
            success: function (data) {
                $("#username").val(data.username);
            }
        });
    }

    init();

    layui.use(['form', 'layer'], function () {
        var form = layui.form, layer = layui.layer;

        form.verify({
            /*校验两次密码是否一致*/
            oldPassword: function (value) {
                if ($('input[name=oldPassword]').val() === value)
                    return '新密码和旧密码一致！';
            }
            /*校验密码是否一致*/
            , newPassword: function (value) {
                if ($('input[name=newPassword]').val() !== value)
                    return '两次新输入的密码不一致！';
            }
        });

        //监听提交
        form.on('submit(demo)', function (data) {
            console.log(data.field);
            $.ajax({
                type: 'POST',
                url: '/users/' + data.field.username + '/' + data.field.oldPassword + '/' + data.field.newPassword,
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    layer.msg("保存成功！", {time: 1000, icon: 1}, function () {
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
                        parent.layer.close(index); //再执行关闭
                    });
                }
            })
            return false;
        });
    });

</script>
</body>
</html>